import React from 'react'
import {UserModel} from '../api/user'
import {connect} from 'react-redux'
import {Input, List, message, Modal} from 'antd'
import ListItem from "antd/es/transfer/ListItem";
import '../style/home.less'
import Button from "antd/es/button";

const userModel=new UserModel()




@connect(
  state=>state,
  {}
)
class Home extends React.Component{
  constructor(props) {
    super(props);
    this.state={
      user:null,
      visible1:false,
      username:null,
      desc:null,
      pwd:null
    }

    this.getUser()

  }

  getUser(){
    console.log("userId",this.props.user);
    userModel.getUserbyId(this.props.user.userId).then(res=>{
      if(res.code===0){
        this.setState({
          user:res.data,
          username:res.data.username,
          desc:res.data.desc,
          visible1:false,
          visible2:false
        })
      }else{
        message.error("获取个人信息失败")
      }
    }).catch(err=>{
      message.error('获取个人信息失败')
    })
  }

  handleChange(key,e){
    console.log(key,e)
    this.setState({
      [key]:e.target.value
    })
  }
  openEditModel(){
    this.setState({
      visible1:true,

    })
  }

  openEditModel1(){
    this.setState({
      visible2:true,

    })
  }

  handleCancel(){
    this.setState({
      visible1:false,
      visible2:false
    })
  }

  handleOk(){
    const {username,desc}=this.state
    const _id=this.props.user.userId
    this.updateUser(_id,username,desc)
  }
  updateUser(_id,username,desc){
    userModel.editUser(_id,username,desc)
      .then(res=>{
        if(res.code===0){
          message.success("更新成功")
          this.getUser()
        }else{
          message.error('更新失败')
        }
      }).catch(err=>{
        message.error('更新失败')
      })
  }

  handleOk2(){
    const {pwd}=this.state
    const _id=this.props.user.userId
    this.updatePwd(_id,pwd)
  }

  updatePwd(_id,pwd){
    userModel.editPwd(_id,pwd)
      .then(res=>{
        if(res.code===0){
          message.success("更新成功")
          this.getUser()
        }else{
          message.error('更新失败')
        }
      }).catch(err=>{
      message.error('更新失败')
    })
  }

  render() {
    const {user,username,desc,pwd}=this.state
    return user?(
      <div>
        <Button
          onClick={()=>this.openEditModel()} type="primary">
          编辑个人信息
        </Button>
        <Button
          onClick={()=>this.openEditModel1()} type="primary">
          修改密码
        </Button>
        <br/><br/>
        <List>
          <List.Item><label className='lb1'>用户名:</label>{user.user}</List.Item>
          <List.Item><label className='lb1'>姓名:</label>{user.username}</List.Item>
          <List.Item><label className='lb1'>描述:</label>{user.desc}</List.Item>
        </List>
        <Modal
          title="编辑个人信息"
          visible={this.state.visible1}
          onOk={()=>this.handleOk()}
          onCancel={()=>this.handleCancel()}
        >
          <p>
            <Input
              placeholder="姓名"
              value={username}
              onChange={(event)=>this.handleChange('username',event)}
            />
            <br/><br/>
            <Input
              placeholder="姓名"
              value={desc}
              onChange={(event)=>this.handleChange('desc',event)}
            />
          </p>
        </Modal>

        <Modal
          title="编辑个人信息"
          visible={this.state.visible2}
          onOk={()=>this.handleOk2()}
          onCancel={()=>this.handleCancel()}
        >
          <p>
            <Input
              placeholder="密码"
              value={pwd}
              onChange={(event)=>this.handleChange('pwd',event)}
            />
          </p>
        </Modal>

      </div>
    ):null
  }
}


export default Home;
